<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<style type="text/css">
    div {
        margin: 20px;
    }
    button {
        margin: 0 20px;
    }
    label {
        margin-right: 10px;
        width: 60px;
        display: inline-block;
        /*border: 2px solid red;*/
    }
</style>
<body>
<form action="#" method="POST" onsubmit="form_submit();">
    <div>
        <label for="name">用户名</label>
        <input id="name" type="text" name="username" placeholder="用户名" onchange="username_typed(value);">
    </div>
    <div>
        <label for="pass">密码</label>
        <input id="pass" type="password" name="password" placeholder="密码">
    </div>
    <div>
        <label for="gen">性别</label>
        <div id="gen" style="display: inline; margin: 0 0">
            <label>
                <input type="radio" name="gender">
                男
            </label>
            <label>
                <input type="radio" name="gender">
                女
            </label>
        </div>

    </div>
    <div>
        <label for="deg">学历</label>
        <div id="deg" style="display: inline; margin: 0 0">
            <label>
                <input type="radio" name="degree">
                本科
            </label>
            <label>
                <input type="radio" name="degree">
                专科
            </label>
        </div>
    </div>
    <div>
        <textarea id="intro" cols="30" rows="6" placeholder="自我介绍"></textarea>
    </div>
    <button onsubmit="form_submit();">提交</button>
</form>
<script type="text/javascript">
    function form_submit() {
        const elem = document.getElementById("intro");
        if (elem.value) {
            alert(elem.value);
        }
    }
    function username_typed(value) {
        if (value !== "admin") {
            alert("用户名错误！");
            const elem = document.getElementById("name");
            elem.value = "";
        }
    }
</script>
</body>
</html>